<template>
  <div class="container">
    <!-- 左侧导航栏 -->
    <div class="sider">
      <a-menu v-model:openKeys="openKeys" mode="inline">
        <a-sub-menu key="sub1" title="碳金融衍生品">
          <a-menu-item key="1" @click="changePage('carbonFutures')">碳期货介绍</a-menu-item>
          <a-menu-item key="2" @click="changePage('carbonOptions')">碳期权介绍</a-menu-item>
          <a-menu-item key="3" @click="changePage('carbonSwaps')">碳掉期介绍</a-menu-item>
          <a-menu-item key="4" @click="changePage('carbonIndexDerivatives')">碳指数衍生品介绍</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="5" @click="changePage('enterpriseTransactions')">企业交易情况</a-menu-item>
        <a-menu-item key="6" @click="changePage('userManagement')">用户管理</a-menu-item>
        <a-menu-item key="7" @click="changePage('auditLogs')">日志审计</a-menu-item>
        <a-menu-item key="8" @click="changePage('help')">帮助</a-menu-item>
      </a-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content">
      <!-- 碳期货介绍 -->
      <a-card v-if="currentPage === 'carbonFutures'" title="碳期货" class="content-card">
        <a-table :columns="columns" :data-source="reports"> </a-table>
      </a-card>

      <!-- 碳期权介绍 -->
      <a-card v-if="currentPage === 'carbonOptions'" title="碳期权" class="content-card">
        <p>碳期权赋予持有者在未来某一日期之前以固定价格买入或卖出一定数量的碳配额或碳信用的权利。</p>
        <p>功能：提供灵活的价格风险管理工具。</p>
      </a-card>

      <!-- 碳掉期介绍 -->
      <a-card v-if="currentPage === 'carbonSwaps'" title="碳掉期" class="content-card">
        <p>碳掉期是两方协议，双方同意在未来交换不同时间或地点的碳信用或碳配额。</p>
        <p>功能：帮助企业或投资者调整碳资产的时间结构或地域分布。</p>
      </a-card>

      <!-- 碳指数衍生品介绍 -->
      <a-card v-if="currentPage === 'carbonIndexDerivatives'" title="碳指数衍生品" class="content-card">
        <p>碳指数衍生品是基于某一碳价格指数（如 EUA 价格指数）的金融工具，通常包括碳指数期货和碳指数期权。</p>
        <p>功能：提供基于碳市场整体价格走势的投资和对冲工具。</p>
      </a-card>

      <!-- 企业交易情况 -->
      <a-card v-if="currentPage === 'enterpriseTransactions'" title="企业交易情况" class="content-card">
        <a-table :columns="transactionsColumns" :data-source="transactionsData"> </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
  import { h, reactive, computed, ref, onMounted } from 'vue';
  import { carbonFinancialDerivatives } from '/@/api/Carbon module/Carbon asset module/Carbon asset project/carbonFinancialDerivatives';
  import { smartSentry } from '/@/lib/smart-sentry';

  const openKeys = ref(['sub1']);
  const currentPage = ref('carbonFutures');
  const changePage = (page) => {
    currentPage.value = page;
  };
  const columns = [
    { title: '衍生品名称', dataIndex: 'derivativeName', key: 'derivativeName' },
    {
      title: '衍生品描述',
      dataIndex: 'description',
      key: 'description',
    },
    { title: '衍生品功能描述', dataIndex: 'functions', key: 'functions' },
    {
      title: '使用方式',
      dataIndex: 'usages',
      key: 'usages',
    },
  ];
  const reports = ref([]);

  const transactionsColumns = [
    { title: '碳资产类型', dataIndex: 'caCategoryName', key: 'caCategoryName' },
    {
      title: '碳资产项目',
      dataIndex: 'projectName',
      key: 'projectName',
    },
    { title: '交易类型', dataIndex: 'transactionType', key: 'transactionType' },
    {
      title: '交易日期',
      dataIndex: 'transactionDate',
      key: 'transactionDate',
    },
    {
      title: '交易数量',
      dataIndex: 'transactionAmount',
      key: 'transactionAmount',
    },
    {
      title: '交易单价',
      dataIndex: 'transactionPrice',
      key: 'transactionPrice',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
  ];

  const transactionsData = ref([]);
  // 查询绿证列表
  const pagination = computed(() => ({
    total: total.value,
    pageSize: queryFormState.pageSize,
    current: queryFormState.pageNum,
    showTotal: (total) => `总共${total}项`,
  }));
  const queryFormState = reactive({
    pageNum: 1,
    pageSize: 10,
  });
  const tableLoading = ref(false);
  const total = ref(0); //总数
  const queryForm = reactive({ ...queryFormState });
  async function queryData() {
    tableLoading.value = true;
    try {
      queryForm.pageNum = queryFormState.pageNum; // 确保页码同步
      queryForm.pageSize = queryFormState.pageSize;
      let queryResult = await carbonFinancialDerivatives.query(queryForm);
      reports.value = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  const handleChange = (pagination, filters, sorter) => {
    queryFormState.pageNum = pagination.current; // 更新当前页
    queryFormState.pageSize = pagination.pageSize; // 更新页大小
    queryData();
  };

  // 碳资产类型
  const assetsCategories = ref([]);
  async function queryAssetsCategory() {
    let queryResult = await carbonFinancialDerivatives.queryAssetsCategory({
      pageNum: 1,
      pageSize: 100,
    });
    assetsCategories.value = queryResult.data.list;
  }

  // 企业交易情况
  const queryTransactionsFormState = reactive({
    pageNum: 1,
    pageSize: 10,
  });
  const transactionsTotal = ref(0);
  const queryTransactionsForm = reactive({ ...queryTransactionsFormState });
  async function queryTransactionsData() {
    tableLoading.value = true;
    try {
      queryTransactionsForm.pageNum = queryTransactionsFormState.pageNum; // 确保页码同步
      queryTransactionsForm.pageSize = queryTransactionsFormState.pageSize;
      let queryResult = await carbonFinancialDerivatives.queryTransactions(queryTransactionsForm);
      transactionsData.value = queryResult.data.list;
      transactionsTotal.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  onMounted(() => {
    queryData();
    queryAssetsCategory();
    queryTransactionsData();
  });
</script>

<style scoped>
  .container {
    display: table;
    width: 100%;
  }

  .sider {
    display: table-cell;
    width: 220px;
    vertical-align: top;
    background: #fff;
    border-right: 1px solid #f0f0f0;
    height: 720px;
    box-sizing: border-box;
  }

  .content {
    display: table-cell;
    padding-left: 11px;
    vertical-align: top;
  }

  .content-card {
    margin-bottom: 16px;
    border-radius: 8px;
  }
</style>
